<template>
	<view>
		<!-- <button @click="go">跳转</button> -->
		<!--swiper-->
		<!-- <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :current="num" >
			<swiper-item>
				<view class="swiper-item">123</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">2</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">3</view>
			</swiper-item>
		</swiper> -->
		<u-swiper :list="list"></u-swiper>
		<!-- <input type="number" v-model="num"/> -->
		<!-- scroll-view -->
		<u-grid :col="4" :border="false">
			<u-grid-item>
				<img src="static/装修报价.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">装修报价</view>
			</u-grid-item>
			<u-grid-item>
				<img src="static/设计师.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">设计师</view>
			</u-grid-item>
			<u-grid-item>
				<img src="static/设计案例.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">设计案例</view>
			</u-grid-item>
			<u-grid-item>
				<img src="static/总裁.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">关于总裁</view>
			</u-grid-item>
			<u-grid-item>
				<img src="static/独立体系.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">全案体系</view>
			</u-grid-item>
			<u-grid-item>
				<img src="static/工程.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">良心工程</view>
			</u-grid-item>
			<u-grid-item>
				<img src="static/环保.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">极致环保</view>
			</u-grid-item>
			<u-grid-item>
				<img src="static/服务.png" style="background-color:#C26636;padding:5px;width:30%;border-radius: 10rpx;">
				<view class="grid-text">客户服务</view>
			</u-grid-item>
		</u-grid>
		<view class="design">
			<view class="design-top">
				<view><text>设计案例</text>|<text style="color:#9FA0A9">DESIGN WORKS</text></view>
				<view><text>查看更多>></text></view>
			</view>
			<view class="design-bottom" v-for="(item,index) in design" :key="index">
				<view class="db1">
					<img :src="item.image">
				</view>
				<view class="db2">
					<text>{{item.text}}</text>
				</view>
			</view>
		</view>
		<view class="liner" style="background-color: #EFEFEF;height:15px;margin-top:20px;"></view>
		<view class="designer">
			<view class="designer-top">
				<view><text>设计师推荐</text>|<text style="color:#9FA0A9">RECOMMENDED DESIGNER</text></view>
				<view><text>查看更多>></text></view>
			</view>
			<view class="designer-bottom-box">
				<view class="designer-bottom" v-for="(item,index) in designer" :key="index">
					<view class="dr1">
						<img :src="item.image" alt="">
					</view>
					<view class="dr2">
						<text>{{item.text1}}</text>
					</view>
					<view class="dr3">
						<text>{{item.text2}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="liner" style="background-color: #EFEFEF;height:15px;margin-top:20px;"></view>
		<view class="art">
			<view class="art-top">
				<view><text>良心工艺</text>|<text style="color:#9FA0A9">CONSCIENCE CRAFT</text></view>
				<view><text>查看更多>></text></view>
			</view>
			<view class="art-bottom">
				<view class="art-left">
					<view class="al1"><img src="https://cdn.uviewui.com/uview/swiper/1.jpg" alt=""></view>
					<view class="al2">
						<text>水电工艺</text>
					</view>
				</view>
				<view class="art-right-box">
					<view class="art-right" v-for="(item,index) in art" :key="index">
						<view class="ar1"><img :src="item.image" alt=""></view>
						<view class="ar2">
							<text>{{item.text}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="liner" style="background-color: #EFEFEF;height:15px;margin-top:20px;"></view>
		<view class="story">
			<view class="story-top">
				<view><text>业主故事</text>|<text style="color:#9FA0A9">OWNER`S STORY</text></view>
				<view><text>查看更多>></text></view>
			</view>
			<view class="story-content-box">
				<view class="story-content" v-for="(item,index) in story" :key="index">
					<view class="sc1"><img :src="item.image" alt=""></view>
					<view class="sc2">
						<text>{{item.text}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="liner" style="background-color: #EFEFEF;height:15px;margin-top:20px;"></view>
		<view class="honor">
			<view class="honor-top">
				<view><text>大业荣誉</text>|<text style="color:#9FA0A9">HONOR</text></view>
				<view><text>查看更多>></text></view>
			</view>
			<view class="honor-bottom">
				<view class="hb1">
					<img src="https://cdn.uviewui.com/uview/swiper/1.jpg" alt="">
				</view>
				<view class="hb2">
					<text>硕果累累 | 初心不忘 以行践言</text>
				</view>
			</view>
		</view>
		<view class="home">
			<view class="home-top">
				<view><text>大业美家</text>|<text style="color:#9FA0A9">ABOUT US</text></view>
				<view><text>查看更多>></text></view>
			</view>
			<view class="home-bottom-box">
				<view class="home-bottom" v-for="(item,index) in home" :key="index">
					<view class="mb1">
						<img :src="item.image" alt="">
					</view>
					<view class="mb2">
						<view class="mb2-1">
							<text class="mb-text">{{item.text1}}</text>
							<text>{{item.text2}}</text>
						</view>
						<view class="mb2-2">
							<text>{{item.text3}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="service-box">
			<view class="service">
			    <view class="top">
			      <view class="top-line"></view>
			      <view class="top-content">
			        <image src="/static/商品.png" mode=""/>
			        <view class="content-right">
			          <view>service</view>
			          <view>全过程服务体系</view>
			        </view>
			      </view>
			    </view>
			    <view class="bottom-box">
			      <view class="bottom" v-for="(item,index) in ser" :key="index">
			      <image :src="item.image" mode=""/>
			      <view>{{item.text}}</view>
			    </view>
			  </view>
			  </view>
		</view>
		<view class="free">
			<view>
				<text>预约装修</text>
			</view>
			<view>
				<text>ROOM</text>
			</view>
			<input type="text" placeholder="选择你所在的城市" placeholder-style="text-align:left;margin-left:10px;">
			<input type="text"placeholder="姓名"placeholder-style="text-align:left;margin-left:10px;">
			<input type="text"placeholder="联系方式"placeholder-style="text-align:left;margin-left:10px;">
			<input type="text"placeholder="楼盘"placeholder-style="text-align:left;margin-left:10px;">
			<button>立即预约</button>
		</view>
		
		<view class="box" style="margin-top:40px;">
		<view class="box1">
		  <view class="gongshi1">大业美家分公司</view>
		  <view class="rexian">
		  <view class="line"></view>
		  <view class="word">贵宾热线</view>
		  </view>
		  <view class="phone">
		      <view v-for="(item,index) in phone" wx:key="index">{{item.text1}}{{item.text2}}</view>
		  </view>
		</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				design: [{
						id: 1,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "鑫湖一号 | 400平方米 | 现代简约"
					},
					{
						id: 2,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "高尔夫别墅 | 400平方米 | 现代简约"
					}
				],
				designer: [{
						id: 1,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text1: "胡歌",
						text2: "演员"
					},
					{
						id: 2,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text1: "刘德华",
						text2: "演员"
					},
					{
						id: 3,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text1: "肖战",
						text2: "演员"
					}
				],
				art: [{
						id: 1,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "木工工程"
					},
					{
						id: 2,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "瓦工工艺"
					},
					{
						id: 3,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "油工工艺"
					},
					{
						id: 4,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "文明施工"
					}
				],
				story: [{
						id: 1,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "半山壹号 | 张女士"
					},
					{
						id: 2,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text: "首开琅樾 | 白女士"
					}
				],
				home: [{
						id: 1,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text1: "9",
						text2: "年专注",
						text3: "做别墅大宅设计"
					},
					{
						id: 2,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text1: "12",
						text2: "座布局",
						text3: "核心城市"
					},
					{
						id: 2,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text1: "12",
						text2: "家",
						text3: "直营分公司"
					},
					{
						id: 2,
						image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
						text1: "8500",
						text2: "个家庭",
						text3: "的一致选择"
					}
				],
				ser:[
				    {id:1,image:"/static/商品.png",text:"客户管家"},
				    {id:2,image:"/static/商品.png",text:"微信服务群"},
				    {id:3,image:"/static/商品.png",text:"总裁办回访"},
				    {id:4,image:"/static/商品.png",text:"总经理每周巡检"},
				    {id:5,image:"/static/商品.png",text:"感恩行&美家会"},
				    {id:6,image:"/static/商品.png",text:"终身维修"}
				  ],
					phone:[
					    {id:1,text1:"北京：",text2:"400-100-1611"},
					    {id:2,text1:"南京：",text2:"400-100-0619"},
					    {id:3,text1:"武汉：",text2:"400-888-4798"},
					    {id:4,text1:"济南：",text2:"400-656-8188"},
					    {id:5,text1:"南宁：",text2:"400-606-6990"},
					    {id:6,text1:"成都：",text2:"400-098-0999"},
					    {id:7,text1:"郑州：",text2:"400-114-0371"},
					    {id:8,text1:"沈阳：",text2:"400-094-6096"},
					    {id:9,text1:"无锡：",text2:"400-668-7771"},
					    {id:10,text1:"昆山：",text2:"400-051-2765"},
					    {id:11,text1:"东莞：",text2:"400-154-6066"},
					    {id:12,text1:"佛山：",text2:"400-861-3208"},
					  ]
			}
		},
		methods: {
			go() {
				uni.navigateTo({
					url: "/pages/user/user"
				})
			}
		}
	}
</script>
<style lang="scss">
	view {
		.grid-text {
			font-size: 26rpx;
			margin-top: 4rpx;
			color: black;
		}

		.design {
			width: 95%;
			margin: auto;

			.design-top {
				display: flex;
				justify-content: space-between;
			}

			.design-bottom {
				position: relative;
				margin-bottom: 10px;

				.db1 img {
					width: 100%;
					height: 200px;
				}

				.db2 {
					color: white;
					font-size: 28rpx;
					background-color: rgba(0, 0, 0, 0.5);
					line-height: 50rpx;
					padding-left: 15rpx;
					position: absolute;
					bottom: 0rpx;
					width: 100%;
					box-sizing: border-box;
				}
			}
		}

		.designer {
			width: 95%;
			margin: auto;
			padding-top: 20px;

			.designer-top {
				display: flex;
				justify-content: space-between;
			}

			.designer-bottom-box {
				display: flex;
				justify-content: space-between;
				margin: auto;
				position: relative;
				margin-bottom: 20rpx;

				.designer-bottom {
					width: 30%;

					.dr1 img {
						width: 100%;
						height: 250rpx;
					}

					.dr2 {
						font-size: 30rpx;
						text-align: center;
						background-color: #efefef;
						color: #636363;
					}

					.dr3 {
						font-size: 30rpx;
						text-align: center;
						background-color: #efefef;
						color: #ababab;
					}
				}
			}
		}

		.art {
			padding-top: 20px;
			width: 95%;
			margin: auto;

			.art-top {
				display: flex;
				justify-content: space-between;
			}

			.art-bottom {
				display: flex;
				justify-content: space-between;

				.art-left {
					width: 48%;
					position: relative;

					.al1 img {
						width: 100%;
						height: 430rpx;
					}

					.al2 {
						background-color: rgba(0, 0, 0, 0.5);
						color: white;
						position: absolute;
						top: 0;
						padding: 0 15rpx;
						font-size: 27rpx;
						line-height: 50rpx;
					}
				}

				.art-right-box {
					width: 48%;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;

					.art-right {
						width: 48%;
						position: relative;

						.ar1 img {
							width: 100%;
							height: 210rpx;

						}

						.ar2 {
							background-color: rgba(0, 0, 0, 0.5);
							color: white;
							position: absolute;
							top: 0;
							padding: 0 15rpx;
							font-size: 27rpx;
							line-height: 50rpx;
						}
					}
				}
			}
		}

		.story {
			padding-top: 20px;
			width: 95%;
			margin: auto;

			.story-top {
				display: flex;
				justify-content: space-between;
			}

			.story-content-box {
				display: flex;
				justify-content: space-between;

				.story-content {
					width: 48%;
					position: relative;

					.sc1 img {
						width: 100%;
						height: 300rpx;
					}

					.sc2 {
						background-color: rgba(0, 0, 0, 0.5);
						color: white;
						position: absolute;
						bottom: 7rpx;
						width: 100%;
						padding-left: 10rpx;
						box-sizing: border-box;
						font-size: 27rpx;
						line-height: 50rpx;
					}
				}
			}
		}

		.honor {
			padding-top: 20px;
			width: 95%;
			margin: auto;
			position: relative;

			.honor-top {
				display: flex;
				justify-content: space-between;
			}

			.honor-bottom {
				.hb1 img {
					width: 100%;
					height: 400rpx;
				}

				.hb2 {
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					position: absolute;
					bottom: 7rpx;
					width: 100%;
					padding-left: 10rpx;
					box-sizing: border-box;
					font-size: 27rpx;
					line-height: 50rpx;
				}
			}
		}

		.home {
			width: 95%;
			margin: auto;
			padding-top: 20px;

			.home-top {
				display: flex;
				justify-content: space-between;
			}

			.home-bottom-box {
				margin: auto;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.home-bottom {
					width: 48%;
					display: flex;
					box-shadow: 5px 5px 5px 5px #f7f7f7;
					margin: 7rpx;

					.mb1 img{
						width:150rpx;
						height:160rpx;
					}

					.mb2 {
						.mb2-1{
							font-size:26rpx;
							  font-weight:bold;
							  margin:30rpx 0 20rpx 5rpx;
								.mb-text{
									  font-size:38rpx;
									  margin:0 5rpx;
									  text-decoration:underline;
								}
						}
						.mb2-2{
							 font-size:23rpx;
							   margin-left:10rpx;
							 }
					}
				}
			}
		}
		.service-box{
			margin-top:20px;
			margin-bottom:40px;
			.service{
				margin-top:20px;
			  border:1px solid white;
			  background-color:#efefef;
			  width:95%;
			  margin:auto;
			  position:relative;
			  height:450rpx;
			}
			.top-line{
			  border-bottom:2px solid #cccccc;
			  width:90%;
			  margin:auto;
			  margin-top:60rpx;
			}
			.top-content image{
			  width:35%;
			  height:120rpx;
			}
			.top-content{
			  width:300rpx;
			  height:150rpx;
			  display:flex;
			  margin:auto;
			  position:absolute;
			  top:0;left:26%;
			  background-color:#efefef;
			}
			.content-right view:nth-child(1){
			  font-weight:bold;
			  margin:30rpx 0 8rpx 0;
			}
			.content-right view:nth-child(2){
			  font-size:25rpx;
			}
			.bottom-box{
			  display:flex;
			  flex-wrap: wrap;
			  margin-top:85rpx;
			}
			.bottom{
			  width:30%;
			  height:160rpx;
			  text-align: center;
			  margin:auto;
			}
			.bottom image{
			  width:32%;
			  height:60rpx;
			}
			.bottom :nth-child(2){
			  font-size:25rpx;
			}
		}
		.free{
			text-align: center;
			width:90%;
			margin:auto;
		}
		.free view:nth-child(1){
			color:#C26636;
			font-size:30px;
		}
		.free view:nth-child(2){
			color:#91908F;
		}
		input{
			width:95%;
			margin:auto;
			height:30px;
			border:1px solid #CCCCCC;
			margin-top:10px;	
		}
		button{
			width:95%;
			margin:auto;
			height:40px;
			line-height: 40px;
			margin-top:10px;
			background-color: #C26636;
			color:white;
			font-weight: bold;
			font-size:22px;
		}
		
		.box{
		  width: 100%;
		  margin: 10px 0px;
		  padding: 10px 0px;
		  background-color: #e6e6e6;
		}
		.gongshi1{
		  margin-bottom: 10px;
		}
		.box1{
		  width: 95%;
		  text-align: center;
		  margin: auto;
		}
		.rexian{
		  width: 100%;
		  text-align: center;
		  position: relative;
		  
		}
		.line{
		  width: 40%;
		  height: 1px;
		  margin-left: 100px;
		  background-color: silver;
		}
		.word{
		  color:#6e6e6e;
		  margin-left: 140px;
		  position: absolute;
		  top: -10px;
		  background-color:#e6e6e6;
		}
		.phone{
		  width: 100%;
		  display: flex;
		  flex-wrap: wrap;
		  justify-content: space-between;
		  margin-top: 20px;
		  line-height: 20px;
		}
		.phone view{
		  color:#6e6e6e;
		  margin-bottom:10px;
		  width: 33%;
		  font-size: 23rpx;
		}
	}
</style>